<template>
  <div class="card">
    <div class="card-title">
      <el-icon><document /></el-icon>
      信号数据表
    </div>

    <div class="data-tabs">
      <el-tabs type="border-card" class="dark-tabs">
        <el-tab-pane label="全部信号">
          <div class="table-container">
            <el-table
                :data="currentPageData"
                style="width: 200%"
                height="calc(100vh - 320px)"
                stripe
                border
                size="small"
                :header-cell-style="{
                background: 'rgba(10, 22, 70, 0.8)',
                color: '#a0b0ff',
                fontWeight: '600'
              }"
                :row-style="{
                background: 'rgba(19, 25, 60, 0.5)',
                color: '#69696a'
              }"
            >
              <el-table-column prop="time" label="时间(s)" width="240">
                <template #default="{ row }">
                  {{ row.time.toFixed(6) }}
                </template>
              </el-table-column>
              <el-table-column prop="power" label="功率(uW)" width="240">
                <template #default="{ row }">
                  {{ row.power.toFixed(3) }}
                </template>
              </el-table-column>
              <el-table-column prop="DOA" label="DOA(°)" width="240">
                <template #default="{ row }">
                  {{ row.DOA.toFixed(3) }}
                </template>
              </el-table-column>
              <el-table-column prop="frequency" label="频率(MHz)" width="240">
                <template #default="{ row }">
                  {{ row.frequency.toFixed(3) }}
                </template>
              </el-table-column>
              <el-table-column prop="bandwidth" label="带宽(MHz)" width="240">
                <template #default="{ row }">
                  {{ row.bandwidth.toFixed(3) }}
                </template>
              </el-table-column>
              <el-table-column prop="pulseWidth" label="脉宽(us)" width="240">
                <template #default="{ row }">
                  {{ row.pulseWidth.toFixed(3) }}
                </template>
              </el-table-column>
              <el-table-column prop="feature" label="脉内特征" width="150"/>
              <el-table-column prop="SID" label="SID" width="85"/>
            </el-table>

            <div class="pagination-container">
              <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="props.signals.length"
                  layout="total, sizes, prev, pager, next, jumper"
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="高功率信号">开发中...</el-tab-pane>
        <el-tab-pane label="高频率信号">开发中...</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {Document} from '@element-plus/icons-vue'

const props = defineProps({
  signals: {
    type: Array,
    required: true
  }
})

// 分页设置
const currentPage = ref(1)
const pageSize = ref(20)

// 计算当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return props.signals.slice(start, end)
})

// 处理分页大小变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 重置到第一页
}

// 处理当前页变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}
</script>

<style scoped>
.card {
  background: rgba(19, 25, 60, 0.8);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 40, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.card-title {
  font-size: 1.3rem;
  color: #4facfe;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(100, 120, 230, 0.2);
  display: flex;
  align-items: center;
}

.card-title i {
  font-size: 1.5rem;
  margin-right: 10px;
}

.data-tabs {
  margin-top: 20px;
}

.table-container {
  height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 自定义表格样式 */
:deep(.el-table) {
  background-color: rgba(10, 22, 70, 0.3);
  color: #e0e0ff;
  border: 1px solid rgba(64, 158, 255, 0.2);
}

:deep(.el-table th) {
  background-color: rgba(10, 22, 70, 0.8) !important;
  color: #a0b0ff;
  font-weight: 600;
}

:deep(.el-table tr) {
  background-color: rgba(19, 25, 60, 0.5);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
  background-color: rgba(25, 50, 130, 0.3);
}

:deep(.el-table__body tr:hover) {
  background-color: rgba(25, 50, 130, 0.4) !important;
}

:deep(.el-table__body tr.current-row) {
  background-color: rgba(64, 158, 255, 0.2) !important;
}

:deep(.el-pagination) {
  --el-pagination-button-bg-color: rgba(10, 22, 70, 0.5);
  --el-pagination-button-color: #a0b0ff;
  --el-pagination-hover-color: #4facfe;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #4facfe;
  color: #0c1124;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
  color: #4facfe;
}

:deep(.el-tabs__item) {
  color: #a0b0ff;
}

:deep(.el-tabs__item.is-active) {
  color: #4facfe;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba(100, 120, 230, 0.2);
}

:deep(.el-tabs--border-card) {
  background: rgba(19, 25, 60, 0.5);
  border: 1px solid rgba(64, 158, 255, 0.2);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: rgba(10, 22, 70, 0.6);
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  background-color: rgba(19, 25, 60, 0.8);
  border-right-color: rgba(64, 158, 255, 0.2);
  border-left-color: rgba(64, 158, 255, 0.2);
  color: #4facfe;
}
</style>